<template>
	<view>
		<view class="selectAddress">
			<view class="search-box z-margin-t-40">
				<view class="z-flex z-padding-r-32" @click="selectCity">
					<view class="city z-padding-l-32">{{ city }}</view>
					<image class="cityico z-padding-l-16" src="../../static/index/down.png"></image>
				</view>
				<view class="rod z-margin-r-32"></view>
				<view class="input">
					<input type="text" class="z-font-24" @input="setName" placeholder="搜索地点" />
				</view>
				<!-- <view class="seek-btn z-text-c">搜索</view> -->
			</view>

			<view class="result-box z-margin-t-32">
				<view class="each z-padding-lr-32 z-padding-tb-32" v-for="(item,index) in list" @click="selectAddress(item)">
					<view class="address z-font-28">
						<view class="lon-img-box">
							<image class="lon-img" src="../../static/index/locations.png"></image>
						</view>
						{{ item.name }}
					</view>
					<view>
						<view class="detail-address z-margin-t-8">{{ item.address }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../utils/http';
export default {
	data() {
		return {
			list: [],
			city: '',
			name: '',
			times: ''
		};
	},
	onLoad(options) {
	    this.city = options.city,
	    this.name = options.name,
	    this.getList()
	  },
	methods: {
		selectAddress(e){
		    let info = e
		    let data = {
		      province: info.pname,
		      city: info.cityname,
		      district: info.adname,
		      name: info.name,
		      lat: info.location.split(',')[1],
		      lng: info.location.split(',')[0]
		    }
			uni.setStorageSync('address',data)
		    this.util.back()
		  },
		  selectCity(){
		    this.util.skip('/service/selectCity/selectCity',{
		      'selectCity': (data)=>{
		        this.city = data,
		        this.name = data
		        this.getList()
		      }
		    })
		  },
		  setName(e){
			  console.log(e)
		    this.name = e.detail.value
		    clearTimeout(this.times)
		    this.times = setTimeout(()=>{
		      this.getList()
		    }, 800)
		  },
		  getList(){
		    http.get('user/getnearaddress',{
		      city: this.city,
		      name: this.name
		    }, false, false).then(res => {
		     this.list = res.data
		    })
		  },
	}
};
</script>

<style>
page {
	background-color: #edf1f4;
}
.selectAddress {
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.search-box {
	flex-shrink: 0;
	width: 686rpx;
	height: 70rpx;
	background: #ffffff;
	border-radius: 44rpx 44rpx 44rpx 44rpx;
	opacity: 1;
	margin: auto;

	display: flex;
	align-items: center;
}

.city {
	font-size: 24rpx;
	font-weight: 500;
	color: #6b738b;
}

.cityico {
	width: 13rpx;
	height: 8rpx;
}

.rod {
	width: 0rpx;
	height: 24rpx;
	opacity: 1;
	border-right: 1rpx solid #a4a9b7;
}

.input {
	flex: 1;
}

.seek-btn {
	width: 90rpx;
	height: 58rpx;
	background: #62cb81;
	border-radius: 44rpx 44rpx 44rpx 44rpx;
	opacity: 1;
	font-size: 22rpx;
	line-height: 58rpx;
	font-weight: 500;
	color: #ffffff;
	margin-right: 6rpx;
}

.result-box {
	flex: 1;
	overflow-y: auto;
	width: 686rpx;

	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
}

.address {
	display: flex;
	align-items: center;
}

.lon-img-box {
	width: 46rpx;
	height: 30rpx;
}

.lon-img {
	width: 30rpx;
	height: 30rpx;
}

.each {
	border-bottom: 1rpx solid #edeef1;
	background: #ffffff;
}

.each:last-of-type {
	border: none;
}

.detail-address {
	font-size: 22rpx;
	font-weight: 500;
	color: #a4a9b7;
	padding-left: 46rpx;
}
</style>
